<template>
    <div class="page-blog">
        <!-- 横幅 -->
        <div class="banner-section">
            <Banner banner="banner3" />
            <div class="text-box">
                <blog-banner />
            </div>
        </div>

        <!-- 文章模块 -->
        <div class="article-section el-bkgd-white el-mx-1200">
            <div class="article-aside el-box-init">
                <category-list :list="categorys.list" />
                <i class="line bg-gradient"></i>
                <tag-list :list="tags.list" />
            </div>
            <div class="article-mian">
                <article-list :list="articles.list" />
                <!-- 表格分页 -->
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="articles.currentPage"
                    :page-sizes="articles.pageSizes"
                    :page-size="articles.pageSize"
                    :layout="articles.layout"
                    :total="articles.total"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { blog as Api } from "../../api";

export default {
    async asyncData({ app: { $axios, $localConfig }, query }) {
        let params = {
            per_page: $localConfig.pagination.pageSize,
            page: Number(
                typeof query.page == "undefined"
                    ? $localConfig.pagination.currentPage
                    : query.page
            ),
            category_id: Number(
                typeof query.category != "undefined" ? query.category : 0
            ),
            tag_id: Number(typeof query.tag != "undefined" ? query.tag : 0),
        };

        const [article, category, tags] = await Promise.all([
            $axios.$get(Api.getArticleList, { params }),
            $axios.$get(Api.category),
            $axios.$get(Api.tags, {
                params: {
                    category_id: Number(
                        typeof query.category != "undefined"
                            ? query.category
                            : 0
                    ),
                },
            }),
        ]);

        return {
            // 文章
            articles: {
                list: article.data.list,
                currentPage: params.page, // 默认页
                pageSize: params.per_page, // 每页多少条
                pageSizes: $localConfig.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: $localConfig.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: article.data.total, // 总条数
            },
            // 分类
            categorys: {
                list: category.data.list,
            },
            // 标签
            tags: tags.data,
        };
    },
    methods: {
        handleCurrentChange(val) {
            let query = { page: val };

            if (typeof this.$route.query.category != "undefined")
                query.category = this.$route.query.category;

            if (typeof this.$route.query.tag != "undefined")
                query.tag = this.$route.query.tag;

            this.$router.push({
                path: "/blog",
                query,
            });
        },
    },
    watchQuery: true,
};
</script>

<style lang="less" scoped>
.article-section {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;

    /* 文章页侧边栏 */
    .article-aside {
        max-width: 28%;
        min-width: 28%;
        height: 100%;
        margin-right: 10px;

        .line {
            display: block;
        }
    }

    .article-mian {
        .article-list {
            padding: 0;
            margin-top: 0;
        }
    }

    @media (max-width: 768px) {
        .article-aside {
            display: none;
        }
    }
}
</style>
